<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>

</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px"></canvas>
<script src="//cdn.bootcss.com/three.js/r83/three.min.js"></script>
<script type="text/javascript">
    function init() {
        var renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById('mainCanvas')
        });
        
        // scene
        var scene = new THREE.Scene();
        // camera
        var camera = new THREE.PerspectiveCamera(60, 400 / 300, 1, 10);
        // fov 是视景体竖直方
        // 向上的张角（是角度制而非弧度制），如侧视图所示。
        // aspect 等于 width / height ，是照相机水平方向和竖直方向长度的比值，通常设为
        // Canvas 的横纵比例。
        // near 和 far 分别是照相机到视景体最近、最远的距离，均为正值，且 far 应大于 near

        camera.position.set(0, 0, 5);
        scene.add(camera);

        // a cube in the scene
        var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
            new THREE.MeshBasicMaterial({
                color: 0xff0000,
                wireframe: true
            })
        );
        scene.add(cube);
        renderer.render(scene, camera);

    }
</script>

</body>

</html>